<script setup lang="ts">
import { ref } from 'vue'
import MediaWrap from './media-wrap.vue'
import { getImgSrc } from '@/views/product/reno14-pro/image/6/img-src'
import { useWindowSize } from '@vueuse/core'
import Card from '../components/card.vue'

const { width: viewPortWidth } = useWindowSize()

const activated = ref(0)
const imageSrc = getImgSrc('images-coloros-card-3-0-pc-1.png.webp')
const listData = [
  {
    title: '小布旅行助手',
    desc: '做攻略做规划交给它，适配天数、人数和偏好，定制图文攻略和地图导览。',
    cover: {
      src: imageSrc,
    },
  },
  {
    title: '小布拍照答疑',
    desc: '智能识别不同题目，单题支持多轮提问，学海无涯 AI 相伴。',
    cover: {
      src: imageSrc,
    },
  },
] as const
</script>

<template>
  <Card
    title="小布助手，大有长进"
    subtitle="有了满血版小布助手，随时随地一键 AI。只需一键问屏，大事小事都是一句话的事。"
  >
    <div
      class="my-[6.51vw] grid grid-cols-1 grid-rows-[repeat(2,auto)] gap-y-[6.51vw] sm:mt-[0] sm:mb-[3.12vw] sm:gap-y-[2.6vw] sm:grid-cols-2 sm:grid-rows-1 sm:aspect-auto lg:mb-[clamp(1.125rem,-0.125rem+1.9531vw,1.75rem)] lg:grid-cols-2"
    >
      <div class="relative aspect-[398/344] sm:order-2 sm:aspect-auto">
        <template v-for="(i, key) in listData" :key>
          <div>
            <keep-alive>
              <MediaWrap v-if="activated === key" :src="i.cover.src" />
            </keep-alive>
          </div>
        </template>
      </div>

      <div class="sm:order-1">
        <template v-if="viewPortWidth < 640">
          <div class="px-[5.58vw] sm:px-[3.12vw]">
            <p
              v-for="(i, key) in listData"
              :key
              v-show="activated === key"
              class="h-[2lh] line-clamp-2 text-lg"
            >
              {{ i.desc }}
            </p>
          </div>

          <div
            class="px-[5.58vw] overflow-x-auto [scrollbar-width:none] _mask-img mt-[1.375rem] sm:px-[3.12vw] sm:mt-[2.6vw]"
          >
            <div class="w-max mx-auto">
              <ul class="flex gap-[1.75rem] text-[#ccc]">
                <li
                  v-for="(i, key) in listData"
                  :key
                  @click="activated = key"
                  :class="{ 'item-activate': activated === key }"
                  class="whitespace-nowrap text-sm pb-[0.625rem] item-border cursor-pointer"
                >
                  {{ i.title }}
                </li>
              </ul>

              <div class="w-full h-[2px] -translate-y-[2px] bg-[#0000004d]"></div>
            </div>
          </div>
        </template>

        <template v-else>
          <div
            class="w-full h-full grid content-end pl-[3.12vw] lg:pl-[clamp(1.125rem,-0.125rem+1.9531vw,1.75rem)]"
          >
            <div class="w-max flex h-full sm:w-[31.25vw] sm:max-lg:max-w-[15.75rem] lg:w-auto">
              <div class="flex-none w-[2px] h-full bg-[#0000004d] translate-x-[2px]"></div>
              <ul class="grid gap-y-[clamp(0.625rem,-0.125rem+1.1719vw,1rem)] relative z-1">
                <li
                  v-for="(i, key) in listData"
                  :key
                  class="cursor-pointer pl-[clamp(0.75rem,0rem+1.1719vw,1.125rem)] li-left-border text-[#ccc]"
                  :class="{ 'li-active': activated === key }"
                  @click="activated = key"
                >
                  <p class="text-lg">{{ i.title }}</p>
                  <div class="fold-content" :class="{ 'fold-active': activated === key }">
                    <div class="grid-item">
                      <div class="">
                        <p class="text-base opacity-75">{{ i.desc }}</p>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </template>
      </div>
    </div>
  </Card>
</template>

<style scoped>
._mask-img {
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.item-border {
  border-bottom: 2px solid transparent;
}
.item-activate {
  border-color: black;
  color: black;
}

.li-left-border {
  border-left: 2px solid transparent;
}
.li-active {
  border-left-color: #000;
  cursor: auto;
  color: black;
}

.fold-content.fold-active {
  grid-template-rows: 1fr;
}

.fold-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: all 0.5s;

  .grid-item {
    min-height: 0;
    overflow: hidden;
  }
}
</style>
